
<template>
  <div class="layout">
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="68px"
      >
        <el-form-item label="学生姓名">
          <el-input
            v-model="formInline.nickName"
            placeholder="请输入学生姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="formInline.phonenumber"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="年级">
          <el-input
            v-model="formInline.grade"
            placeholder="请输入年级"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校">
          <el-input
            v-model="formInline.school"
            placeholder="请输入学校"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input
            v-model="formInline.major"
            placeholder="请输入专业"
          ></el-input>
        </el-form-item>
        <el-form-item label="学习方向">
          <el-select v-model="formInline.direction" placeholder="请选择学习方向">
            <el-option label="c" value="0"></el-option>
            <el-option label="java" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            :add="2"
            @click="GenTable"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :add="1"
            @click="handleUpdat()"
            >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete()"
            >删除</el-button
          >
        </el-col>

        <el-button icon="el-icon-search" circle class="search" @click="onSubmit"></el-button>
        <el-button icon="el-icon-refresh" circle class="refresh"  @click="onReset"></el-button>
      </el-row>
    </div>
    <div class="wrapper">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        :default-sort="{ prop: 'date', order: 'descending' }"
         @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="nickName" label="学生姓名" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="账号" align="center">
        </el-table-column>
        <el-table-column prop="classId" label="班级" align="center">
        <template v-slot="scope1" >
            <el-row
              >{{
                scope1.row.classId == 1 ? "java2" : "java1"
              }}</el-row
            >
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生年月日" align="center">
        </el-table-column>
        <el-table-column prop="grade" label="年级" align="center">
        </el-table-column>
        <el-table-column prop="school" label="学校" align="center">
        </el-table-column>
        <el-table-column prop="major" label="专业" align="center">
        </el-table-column>
        <el-table-column prop="direction" label="学习方向" align="center">
        <template v-slot="scope1">
            <el-row
              >{{
                scope1.row.direction == 1 ? "Java" : "c"
              }}</el-row
            >
          </template>
        </el-table-column>
        <el-table-column prop="graduation" label="是否结课" align="center">
        <template v-slot="scope1">
            <el-row
              >{{
                scope1.row.graduation == 1 ? "已结课" : "未结课"
              }}</el-row
            >
          </template>
        </el-table-column>
        <el-table-column prop="worked" label="是否已参加工作" align="center">
        <template v-slot="scope1" >
            <el-row
              >{{
                scope1.row.worked == 1 ? "已工作" : "未工作"
              }}</el-row
            >
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              :add="1"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form
         :model="eidtForm"
          :rules="rules"
          ref="eidtForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="userName">
            <el-input v-model="eidtForm.userName" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="eidtForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input
              v-model="eidtForm.nickName"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="eidtForm.phonenumber"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="eidtForm.email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="eidtForm.sex">
              <el-radio v-model="eidtForm.sex" label="0">男</el-radio>
              <el-radio v-model="eidtForm.sex" label="1">女</el-radio>
              <el-radio v-model="eidtForm.sex" label="2">未知</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日" required>
            <el-col :span="11">
              <el-form-item prop="birthday">
                <el-date-picker
                clearable
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择生日"
                  v-model="eidtForm.birthday"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="年级" prop="grade">
            <el-input
              v-model="eidtForm.grade"
              placeholder="请输入年级"
            ></el-input>
          </el-form-item>
          <el-form-item label="学校" prop="school">
            <el-input
              v-model="eidtForm.school"
              placeholder="请输入学校"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="major">
            <el-input
              v-model="eidtForm.major"
              placeholder="请输入专业"
            ></el-input>
          </el-form-item>

          <el-form-item label="班级" prop="classId">
            <el-select v-model="eidtForm.classId" placeholder="请选择班级">
            <!-- <el-option v-model="eidtForm.classId" label="0">Java1</el-option>
              <el-option v-model="eidtForm.classId" label="1">java2</el-option>
              <el-option v-model="eidtForm.classId" label="2">未知</el-option> -->
              <el-option label="java1" value="0"></el-option>
              <el-option label="java2" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学习方向" prop="direction">
            <el-select v-model="eidtForm.direction" placeholder="请选择方向">
            <!-- <el-option v-model="eidtForm.direction" label="0">c</el-option>
              <el-option v-model="eidtForm.direction" label="1">java</el-option> -->
              <el-option label="java" value="1"></el-option>
              <el-option label="c" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否结课" prop="graduation">
          <el-switch v-model="eidtForm.graduation"
             active-value="1"
              inactive-value="0"
             
            ></el-switch>
            <!-- <el-switch v-model="eidtForm.graduation"></el-switch> -->
          </el-form-item>
          <el-form-item label="是否参加工作" prop="worked">
            <!-- <el-switch v-model="eidtForm.worked"></el-switch> -->
            <el-switch v-model="eidtForm.worked"
             active-value="1"
              inactive-value="0"
             
            ></el-switch>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="eidtForm.remark"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('eidtForm')">取 消</el-button>
          <el-button type="primary" @click="dialogSubmit"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      
    </div>
  </div>
</template>

<script>
import { getStudent,addStudent,uptStudent,delStudent } from "../../api/api/api";
import "highlight.js/styles/github-gist.css";
export default {
  name: "studentInformation",

  created() {
    this.getUserList()
  },
  data() {
    return {
      //排序
      add:'',
      num: 1,
      title:'',
      shuju:'',
      //备注
      textarea: "",
      multipleSelection :[],
      have:false,

      formInline: {
        nickName: "",
        phonenumber: "",
        major: "",
        direction: "",
        grade: "",
        school: "",
      },
      eidtForm: 
        {
          selection: "",
          userName: "",
          password: "",
          nickName: "  ",
          phonenumber: "",
          email: "0",
          sex: "",
          userId: "",
          birthday: "",
          grade: "",
          school: "",
          major: "",
          remark: "",
          classId: "",
          direction: "",
          graduation:false,
          worked:false
        },
       //弹窗
      dialogFormVisible: false,
      loading: false,
      rules: {
        userName: [{ required: true, message: "账号", trigger: "blur" }],
        password: [{ required: true, message: "密码", trigger: "blur" }],
        nickName: [{ required: true, message: "姓名", trigger: "blur" }],
        phonenumber: [{ required: true, message: "手机号码", trigger: "blur" }],
        email: [{ required: true, message: "邮箱", trigger: "blur" }],
        sex: [{ required: true, message: "性别", trigger: "change" }],
        birthday: [
          {required: true,message: "请选择生日",trigger: "change", },
        ],
        grade: [{ required: true, message: "年级", trigger: "blur" }],
        school: [{ required: true, message: "学校", trigger: "blur" }],
        major: [{ required: true, message: "专业", trigger: "blur" }],
        classId: [{ required: true, message: "班级", trigger: "change" }],
        graduation: [{ required: true, message: "是否结课", trigger: "change" }],
        direction: [{ required: true, message: "学习方向", trigger: "change" }],
        worked: [{ required: true, message: "是否参加工作", trigger: "change" }],
        remark: [{ required: true, message: "备注", trigger: "blur" }],
      },

      formLabelWidth: "120px",
      tableData: [
        {
          selection: "",
          userName: "2016-05-02",
          password: "王小虎",
          nickName: "上",
          phonenumber: "册封",
          email: "1",
          sex: "德文法文",
          field: "",
          birthday: "ff",
          grade: "",
          school: "",
          major: "",
          classId: "",
          direction: "",
          graduation: "",
          remark: "",
          worked:''
          
        },
      ],
      
    };
  },

  methods: {
    //查询
    getUserList(){
      this.loading = true;
      getStudent(this.formInline).then(res=>{
        console.log(res.rows);
        this.tableData=res.rows;
        this.loading = false;
      })
    },
    //添加
    addUser() {
    
     
    //  this.eidtForm.birthday = getSimpleDate( this.eidtForm.birthday)
      addStudent(this.eidtForm).then((res) => {
        this.getUserList()
      });
    },

    //删除
    delUser(ids){
      delStudent(ids).then((res)=>{
        console.log("111",res);
        this.getUserList()

      })
    },
    //修改
    updateUsr(){
      uptStudent(this.eidtForm).then((res)=>{
       console.log(res);
      })
    },
    //查询
    onSubmit() {
      this.getUserList();
      // console.log("submit!", this.formInline);
      // const filterPersons = this.tableData.filter(
      //   (formInline) =>
      //     formInline.tip == this.formInline.tip ||
      //     formInline.release == this.formInline.release
      // );
      // this.tableData = filterPersons;
      // this.getUserList()
    },
    //重置
    onReset() {
      (this.formInline = {
        nickName: null,
        phonenumber: null,
        major: null,
        direction: "",
        grade: "",
        school: "",
      }),
        this.getUserList();
      // this.formInline = "";

      // this.tableData;
    },
    //修改
    handleUpdate(index,row) {
      console.log('sss',row);
      this.dialogFormVisible = true;
      this.eidtForm = row;
      this.title = "修改学生信息";
      this.have = true
    },
    handleUpdat(){
      
      this.dialogFormVisible = true;
      this.eidtForm = this.shuju;
      this.have = true
      this.title="修改学生信息"
      
    },
    //删除
    handleDelete(row) {
      console.log("ss", row);

      // this.tableData.splice(row, 1);
      this.$confirm("是否删除轮播图信息?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let ids;
          if (this.multipleSelection.length) {
            ids = this.multipleSelection;
            console.log("qqq", ids);
          } else {
            if (row) {
              ids = row.activityId;
            }
          }
          this.delUser(ids);
          // this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除
    handleDelete(row) {
      console.log("ss", row);

      // this.tableData.splice(row, 1);
      this.$confirm("是否删除轮播图信息?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let ids;
          if (this.multipleSelection.length) {
            ids = this.multipleSelection;
            console.log("qqq", ids);
          } else {
            if (row) {
              ids = row.userId;
            }
          }
          this.delUser(ids);
          // this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除
    // handleDelete(row) {
    //   console.log(row);
    //   let ids;
    //    if(this.multipleSelection.length){
    //        ids = this.multipleSelection
    //    }else{
    //       if(row){
    //         ids = row.userId
    //       }
    //    }
    //    this.delUser(ids)},
      // const ids = row.userId || this.ids;
      // delStudent(ids).then((res)=>{
      //   console.log("111",res);

      // })
      
      
      //弹窗

      // this.$confirm("是否删除轮播图信息?", "系统提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }) .then(() => {
      //     this.$message({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //     this.delUser(ids)
      //     // this.tableData.splice(index, 1);
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
      // if(confirmButtonText == true){
      //     this.tableData.splice(index, 1);
      // }
    
    //新增
    GenTable() {
      this.dialogFormVisible = true;
      this.title = "新增学生信息";
      // const student = this.eidtForm;
      // this.tableData.push(student);
      // this.tableData.push({ ...this.eidtForm });
    },
    //排序
    handleChange(value) {
      console.log("de", value);
    },
        //表单添加
    dialogSubmit(row) {
      if(this.have==true){
        let ddd;
           if(this.multipleSelection.length){

           }else{
              if(row){
                ddd = row.bannerId
              }
           }
        this.updateUsr(ddd)
        
        console.log('aa');
      }else{
         this.addUser();
         console.log('wwww');
      }
      this.eidtForm= {
        selection: "",
          userName: "",
          password: "",
          nickName: "  ",
          phonenumber: "",
          email: "",
          sex: "",
          userId: "",
          birthday: "",
          grade: "",
          school: "",
          major: "",
          remark: "",
          classId: "",
          direction: "",
          graduation:false,
          worked:false
      }
      this.dialogFormVisible = false;
    },
      resetForm(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
      },
      handleSelectionChange(val=[]) {
        this.shuju = val[0]
      this.multipleSelection = []
       val.forEach(item=>this.multipleSelection.push(item.userId))
      }
  },
};
</script>

<style scoped>
.headtop {
  width: 200px;
  background: #666;
  position: fixed;
  top: 0;
  bottom: 0;
}
.comtant {
  margin-left: 200px;
}
.layout {
  margin-top: 20px;
}
.el-button--success.is-plain {
  margin-left: 10px;
}
.el-button--primary.is-plain {
  margin-left: 20px;
}
.el-button--danger.is-plain {
  margin-left: 10px;
}
::v-deep .el-form-item__label {
  font-weight: 700px;
}
.el-button.is-circle {
  padding: 7px;
}
.refresh {
  margin-left: 10px;
}
.search {
  margin-left: 960px;
}
</style>